<template>
  <div class="tpl-content-wrapper">
    <div class="row">
      <!-- 最新捐款记录 end -->
  
      <!-- 最新微信用户 -->
      <div class="am-u-md-12 am-u-sm-12 row-mb">
        <div class="tpl-portlet">
          <div class="tpl-portlet-title">
            <div class="tpl-caption font-green ">
              &nbsp;
              <i class="am-icon-user"></i>
              &nbsp;
              <span>最新停车记录</span>
            </div>
          </div>
          <div class="tpl-scrollable">
            <form class="am-form">
              <table class="am-table am-table-striped am-table-hover table-main">
                <thead>
                  <tr>
                    <th class="table-id">序号</th>
                    <th>用户手机号</th>
                    <th>车位</th>
                    <th>花费（单位：元）</th>
                    <th class="am-hide-sm-only">开始时间</th>
                    <th class="am-hide-sm-only">结束时间</th>
                    <th class="am-hide-sm-only">车号编号</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(list, index) in lists">
                    <td>{{index + 1}}</td>
                    <td>{{list.userPhone}}</td>
                    <td>{{list.name}}</td>
                    <td>{{list.cost}}</td>
                    <td class="am-hide-sm-only">{{list.ctime | date}}</td>
                    <td class="am-hide-sm-only">{{list.etime | date}}</td>
                    <td class="am-hide-sm-only">{{list.srcMac}}</td>
                  </tr>
                </tbody>
              </table>
              <pager :allCount="allCount" :count="count" :page="page" @changePage="changePage" @renovate="renovate"></pager>
              <hr>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { mapActions } from 'vuex'
import * as apis from '../apis'
export default {
  data() {
    return {
      lists: [],
      state: '', fuzzy: '', sctime: '', ectime: '',
      count: 0, allCount: 0,
      page: 1,
      pageSize: 20
    }
  },
  created() {
    this.getCount()
  },
  mounted() {
  },
  computed: {
  },
  methods: {
    getCount() {
      apis.RecordCount(this.fuzzy, this.sctime, this.ectime).then(({ data: data }) => {
        if (data && data.errcode === 0) {
          this.allCount = data.data.count
          this.count = Math.ceil(data.data.count / this.pageSize)
          this.getLists()
        } else {
          this.lists = []
        }
      })
    },
    getLists() {
      apis.RecordList(this.page, this.pageSize, this.fuzzy, this.sctime, this.ectime).then(({ data: data }) => {
        if (data && data.errcode === 0) {
          this.lists = data.data.list
          console.log(this.lists)
        }
      })
    },
    changePage(page) {
      this.page = page
      this.getLists()
    },
    goTo(id) {
      this.$router.push({ name: 'BannerForm', params: { id: id } })
    },
    onSearch() {
      this.page = 1
      this.getCount()
    },
    setSctime(val) {
      this.sctime = val
    },
    setEctime(val) {
      this.ectime = val
    },
    renovate(page) {
      this.getCount()
    }
  }
}

</script>